import React, { Component } from 'react'
import { Link, Switch, Route } from 'react-router-dom'
import MessageContent from './MessageContent'
export default class Message extends Component {
  state = {
    messageArr: [
      { id: '01', title: '消息1' },
      { id: '02', title: '消息2' },
      { id: '03', title: '消息3' }
    ]
  }
  showPush = (id, title) => {
    const { history } = this.props
    return () => {
      // param传参
      history.push(`/home/message/content/${id}/${title}`)

      // search 传参
      // history.push(`/home/message/content/?id=${id}&title=${title}`)

      // history.push('/home/message/content', { id, title })
    }
  }
  showReplace = (id, title) => {
    const { history } = this.props
    return () => {
      // param传参
      history.replace(`/home/message/content/${id}/${title}`)
      // history.replace(`/home/message/content/?id=${id}&title=${title}`)
      // history.replace('/home/message/content', { id, title })
    }
  }
  render() {
    const { messageArr } = this.state
    const { history } = this.props
    return (
      <div>
        <ul>
          {messageArr.map(msg => {
            return (
              <li key={msg.id}>
                {/* 传递params参数 */}
                <Link to={`/home/message/content/${msg.id}/${msg.title}`}>{msg.title}</Link>

                {/* 传递search参数 */}
                {/* <Link to={`/home/message/content/?id=${msg.id}&title=${msg.title}`}  > {msg.title} </Link> */}

                {/* 传递state参数 */}
                {/* <Link to={{ pathname: '/home/message/content', state: { id: msg.id, title: msg.title } }} > {msg.title} </Link> */}
                <button onClick={this.showPush(msg.id, msg.title)}>push</button>   $nbsp;  <button onClick={this.showReplace(msg.id, msg.title)}>replace</button>
              </li>
            )
          })}
        </ul>
        <br />
        {/* 注册路由 */}
        <Switch>
          {/* 接收params参数 */}
          <Route path="/home/message/content/:id/:title" component={MessageContent} ></Route>

          {/* search参数无需特殊接收 */}
          {/* <Route path="/home/message/content" component={MessageContent}></Route> */}

        </Switch>
        <button onClick={() => { history.goForward() }}>前进</button>
        <button onClick={() => { history.goBack() }}>后退</button>
        <button onClick={() => { history.go(2) }}>前进2</button>
        <button onClick={() => { history.go(-2) }}>后退2</button>
      </div>
    )
  }
}
